<template>
  <div class="home">
    <h1>🏠 首页</h1>
    <p>这是路由演示的首页</p>
    <!-- 标签必须闭合，不能只写 <router-link ...> -->
    <router-link to="/about" class="btn">跳转到关于页</router-link>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

<style scoped>
.home {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: #2c3e50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>